import React,{Component} from 'react'
import HotSellingCss from './HotSellingCss.module.css'
import {NavLink} from 'react-router-dom'
import * as api from '../until/getProduct'

export default class HotSelling extends Component{
    constructor(props){
        super(props)
        this.state={
            list:[],
            page:1,
            category:''
        }
    }
    zhuan(){
        window.onscroll=null
    }
    
    render(){
        return (
            <div  className={HotSellingCss.HotSellingbg}>
                <div className={HotSellingCss.con}>
                    <div className={HotSellingCss.nav}>
                        <ul>
                            <li>爆款·连衣裙</li>
                            <li>爆款·T恤</li>
                            <li>爆款·衬衫</li>
                            <li>爆款·外套</li>
                            <li>爆款·针织衫</li>
                            <li>爆款·半身裙</li>
                            <li>爆款·裤装</li>
                            <li></li>
                            <li>筛选</li>
                            <li>XS</li>
                            <li>S</li>
                            <li>M</li>
                            <li>L</li>
                            <li>X</li>
                        </ul>
                    </div>
                    <div className={HotSellingCss.shop}>
                        {
                            this.state.list.map(item=>{
                                return (
                                    <NavLink key={item._id} onClick={()=>this.zhuan()} to={{pathname:'/detail',state:{id:item._id}}}>
                                        <div className={HotSellingCss.productBox}>
                                            <img src={item.coverImg} alt=''/>
                                            <div className={HotSellingCss.productCon}>
                                                <p>{item.name.slice(0,10)}</p>
                                                <p>￥{item.price}</p>
                                            </div>
                                        </div>
                                    </NavLink>
                                )
                            })
                        }
                        
                    </div>
                    
                </div>
            </div>
        )
    }
    componentWillReceiveProps(a){
        window.scrollTo(0,0)
        this.setState({
            category:a.location.state.category
        })
        api.getProduct_categories({
            page:1,
            name:a.location.state.category
        }).then(res=>{
            this.setState({
                list:res.data.products
            })
        })
        let _this = this
        window.onscroll = function (){
            var marginBot = 0;
            if (document.documentElement.scrollTop){
                marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;
            } else {
                marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight;
            }
            if(marginBot<=1) {
                _this.setState({
                    page:_this.state.page+1
                })
                api.getProduct_categories({
                    page:_this.state.page,
                    name:_this.state.category
                }).then(res=>{
                    _this.setState({
                        list:[..._this.state.list,...res.data.products]
                    })
                })
            }
        }
    }
    componentDidMount(){
        window.scrollTo(0,0)
        this.setState({
            category:this.props.location.state.category
        })
        api.getProduct_categories({
            page:this.state.page,
            name:this.props.location.state.category
        }).then(res=>{
            this.setState({
                list:res.data.products
            })
        })
        let _this = this
        window.onscroll = function (){
            var marginBot = 0;
            if (document.documentElement.scrollTop){
                marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;
            } else {
                marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight;
            }
            if(marginBot<=1) {
                _this.setState({
                    page:_this.state.page+1
                })
                api.getProduct_categories({
                    page:_this.state.page,
                    name:_this.state.category
                }).then(res=>{
                    _this.setState({
                        list:[..._this.state.list,...res.data.products]
                    })
                })
            }
        }
    }
}